

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>消息盒子</title>

  <link rel="stylesheet" href="../../../layui.css?v=1">
  <style>
    .layim-msgbox{margin: 15px;}
    .layim-msgbox li{position: relative; margin-bottom: 10px; padding: 0 130px 10px 60px; padding-bottom: 10px; line-height: 22px; border-bottom: 1px dotted #e2e2e2;}
    .layim-msgbox .layim-msgbox-tips{margin: 0; padding: 10px 0; border: none; text-align: center; color: #999;}
    .layim-msgbox .layim-msgbox-system{padding: 0 10px 10px 10px;}
    .layim-msgbox li p span{padding-left: 5px; color: #999;}
    .layim-msgbox li p em{font-style: normal; color: #FF5722;}

    .layim-msgbox-avatar{position: absolute; left: 0; top: 0; width: 50px; height: 50px;}
    .layim-msgbox-user{padding-top: 5px;}
    .layim-msgbox-content{margin-top: 3px;}
    .layim-msgbox .layui-btn-small{padding: 0 15px; margin-left: 5px;}
    .layim-msgbox-btn{position: absolute; right: 0; top: 12px; color: #999;}
  </style>
</head>
<body>

<ul class="layim-msgbox" id="LAY_view"></ul>

<textarea title="消息模版" id="LAY_tpl" style="display:none;">
{{# layui.each(d.data, function(index, item){
  if(item.from){ }}
   {{# if(item.group){ }}
    <li data-groupavatar="{{item.group.avatar}}" data-groupname="{{item.group.groupname}}"  data-fftype="{{item.type}}" data-id="{{item.id}}">
    {{# } else { }}
    <li data-fftype="{{item.type}}" data-id="{{item.id}}" data-uid="{{item.from}}">
   {{# } }}
      <a href="/u/{{ item.from }}/" target="_blank">
        <img src="{{ item.user.avatar }}" class="layui-circle layim-msgbox-avatar">
      </a>
      <p class="layim-msgbox-user">
        <a href="/u/{{ item.from }}/" target="_blank">{{ item.user.username||'' }}</a>
        <span>{{ item.time }}</span>
      </p>
      <p class="layim-msgbox-content">
        {{ item.content }}
        <span>{{ item.remark ? '附言: '+item.remark : '' }}</span>
      </p>
      <p class="layim-msgbox-btn">
        <button class="layui-btn layui-btn-small" data-type="agree">同意</button>
        <button class="layui-btn layui-btn-small layui-btn-primary" data-type="refuse">拒绝</button>
      </p>
    </li>
  {{# } else { }}
    <li class="layim-msgbox-system">
      <p><em>系统：</em>{{ item.content }}<span>{{ item.time }}</span></p>
    </li>
  {{# }
}); }}
</textarea>

<!--
上述模版采用了 laytpl 语法，不了解的同学可以去看下文档：http://www.layui.com/doc/modules/laytpl.html
-->


<script src="../../../../layui.js?v=1"></script>
<script src="../../../../../js/axios.js"></script>
<script src="../../../../../js/axios_instance.js"></script>
<script>
  layui.use(['layim', 'flow'], function(){
    var layim = layui.layim
            ,layer = layui.layer
            ,laytpl = layui.laytpl
            ,$ = layui.jquery
            ,flow = layui.flow;

    var cache = {}; //用于临时记录请求到的数据

    //请求消息
    var renderMsg = function(page, callback){

      //实际部署时，请将下述 getmsg.json 改为你的接口地址

      request({
        method: 'get',
        url: '/layim/audit/list?page=' + page || 1
      }).then(res => {
        if (res.code != 0){
          return layer.msg(res.msg)
        }
        //记录来源用户信息
        layui.each(res.data, function(index, item){
          cache[item.from] = item.user;
        });

        callback && callback(res.data, res.pages);
      });

    };

    //消息信息流
    flow.load({
      elem: '#LAY_view' //流加载容器
      ,isAuto: false
      ,end: '<li class="layim-msgbox-tips">暂无更多新消息</li>'
      ,done: function(page, next){ //加载下一页
        renderMsg(page, function(data, pages){
          var html = laytpl(LAY_tpl.value).render({
            data: data
            ,page: page
          });
          next(html, page < pages);
        });
      }
    });

    //操作
    var active = {
      //同意
      agree: function(othis){
        var li = othis.parents('li')
                ,uid = li.data('uid')
                ,id = li.data('id')
                ,type = li.data('fftype')
                ,groupname = li.data('groupname')
                ,groupavatar = li.data('groupavatar')
                ,from_group = li.data('fromGroup')
                ,user = cache[uid];

        if (type == 'friend'){
          //选择分组
          parent.layui.layim.setFriendGroup({
            type: type
            ,username: user.username
            ,avatar: user.avatar
            ,group: parent.layui.layim.cache().friend //获取好友分组数据
            ,submit: function(group, index){
                  request({
                method: 'post',
                url: '/layim/audit/apply',
                data: {
                  id: id,
                  status: 1,
                  groupId: group
                }
              }).then(res => {
                if (res.code != 0){
                  return layer.msg(res.msg)
                }
                //将好友追加到主面板
                parent.layui.layim.addList({
                  type: type
                  ,avatar: user.avatar //好友头像
                  ,username: user.username //好友昵称
                  ,groupid: group //所在的分组id
                  ,id: uid //好友ID
                  ,sign: user.sign //好友签名
                });
                parent.layer.close(index);
                othis.parent().html('已同意');
              });
            }
          });
        }else if(type == 'group'){
          //选择分组
          parent.layui.layim.setFriendGroup({
            type: 'group' //列表类型，只支持friend和group两种
            ,avatar: groupavatar //群组头像
            ,groupname: groupname //群组名称
            ,id: from_group //群组id
            ,submit: function(group, index){

              request({
                method: 'post',
                url: '/layim/audit/apply',
                data: {
                  id: id,
                  status: 1
                }
              }).then(res => {
                if (res.code != 0){
                  return layer.msg(res.msg)
                }
                parent.layer.close(index);
                othis.parent().html('已同意');
              });
            }
          });
        }
      }

      //拒绝
      ,refuse: function(othis){
        var li = othis.parents('li')
                ,id = li.data('id')
                ,uid = li.data('uid');

        layer.confirm('确定拒绝吗？', function(index){
          request({
            method: 'post',
            url: '/layim/audit/apply',
            data: {
              id: id,
              status: 2
            }
          }).then(res => {
            if (res.code != 0){
              return layer.msg(res.msg)
            }
            layer.close(index);
            othis.parent().html('<em>已拒绝</em>');
          });
        });
      }
    };

    $('body').on('click', '.layui-btn', function(){
      var othis = $(this), type = othis.data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  });
</script>
</body>
</html>
